<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='修改个人信息',active='user'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/assets/css/toastr.css}">
</head>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title"></h4>
                    </div>
                    <div class="col-md-12">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>修改信息</legend>
                        </fieldset>
                        <form class="layui-form layui-form-pane" id="updateForm" action="#" enctype="multipart/form-data">
                            <div class="layui-form-item">
                                <div class="layui-upload">
                                    <input type="file" class="layui-btn" name="avatar" id="avatar">上传头像</input>
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img" id="showPit"  style="width: 95px;">
                                    </div>
                                </div>
                                <a name="list-progress"> </a>
                                <div style="margin-top: 10px;">
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">新邮箱</label>
                                    <div class="layui-input-inline">
                                        <input type="email" name="email"  placeholder="请输入新邮箱"
                                               autocomplete="off" id="email" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">新密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="newpassword"  placeholder="请输入新密码"
                                               autocomplete="off" id="newpassword" class="layui-input">
                                    </div>
                                    <label class="layui-form-label">原密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="password"  placeholder="请输入原密码"
                                               autocomplete="off" id="password" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">个人签名</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="请输入内容" class="layui-textarea"
                                                  id="signature" name="signature"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" type="button" onclick="update()">确定
                                    </button>
                                </div>
                        </form>
                    </div>
                </div>
                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="back/footer :: footer"></div>
<script th:src="@{/assets/js/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/assets/js/toastr.min.js}"></script>
<script type="text/javascript">
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
    });

    //选择图片显示
    $('#updateForm input').change(function(evt){
        if (!window.FileReader) return;
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            var obj = $(this).parent().children('label').children('img');//$(obj).remove();
            reader.onload = (function(theFile) {
                return function(e) {
                    // img 元素
                    $('#showPit').attr('src',e.target.result);
                };
            })(f);
            reader.readAsDataURL(f);
        }
    })

    function update() {
        // var data=$('#updateForm').serialize();
        var file=$("#avatar")[0].files[0];
        // data.append("file",avatarFile);
        var formData=new FormData();
        formData.append('file',file);
        formData.append("password",$('#password').val());
        formData.append("newpassword",$('#newpassword').val());
        formData.append('email',$('#email').val())
        formData.append('signature',$('#signature').val())
        console.log(formData)
        $.ajax({
            url: '/common/user/update',
            type:'post',
            data:formData,
            contentType: false,//必须false才会自动加上正确的Content-Type
            processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
            dataType:'json',
            success:function (res){
                if(res.success){
                    toastr.success("修改信息成功！")
                }else{
                    toastr.error(res.msg)
                }
            },
            error:function (res){
                toastr.error("提交失败！")
            }
        })
    }
</script>
</body>
</html>